<template>
	<view class="flex-col page">
		<view class="flex-col justify-start flex-1 group_2">

			<view class="flex-col">
				<view class="flex-col section_2">
					<view class="flex-row self-stretch group_3">
						<text class="font_2 " :class="type == 0?'text_5':'text_4'" @click="navtop(0)">攻略</text>
						<text class="font_2   ml-45-5" :class="type == 1?'text_5':'text_4'" @click="navtop(1)">评价</text>
					</view>
					<view class="self-start section_3" v-if="type == 0" style="margin-left:17rpx; "></view>
					<view class="self-start section_3" v-if="type == 1"></view>
				</view>

				<view class="flex-col group_4" v-if="type == 1">
					<view class="flex-row justify-between group_5">
						<view class="flex-col justify-start items-center" :class="types == index?'button':'buttons'"
							@click="navtab(index)" v-for="(item,index) in nav"><text class="font_3">{{item}}</text>
						</view>

					</view>
					<view class="mt-14 flex-col">
						<view class="flex-col mt-6 list-item" v-for="(item, index) in pjlist" :key="index">
							<view class="flex-row justify-between">
								<view class="flex-row items-center group_6">
									<image class="image_4" :src="item.avatar" />
									<view class="flex-col group_7">
										<text class="font_4">{{item.nickname}} <text class="font_5"
												style="">{{item.user_mobile}}</text> </text>

										<view class="flex-row mt-8-5">
											<image v-for="(i,id) in 5" class="image_5" src="/static/icon/dxx.png" />
											<!-- <image class="ml-4 image_6" src="/static/icon/dx.png" /> -->
										</view>
									</view>
									<!-- 	<view class="flex-col group_8">
										<text class="self-center font_5">1111</text>
										<image  class="self-start image_5 mt-9-5" src="/static/icon/xx.png" />
									</view> -->
								</view>
								<text class="self-start font_5 text_1"> {{item.create_date}} </text>
							</view>
							<view class="mt-12 flex-col items-start">
								<text class="font_6 text_10">{{item.detail}} </text>
								<!-- <text class="font_6 mt-2-5">动手搬运。</text> -->
							</view>
							<view class="mt-12 flex-row justify-between equal-division">
								<image v-for="(ite,idx) in item.img_json_arr" class="equal-division-item" :src="ite"
									@click="picture(item.img_json_arr,ite)" />

							</view>
						</view>
					</view>
				</view>


				<view v-else>
					<view >
						<!-- 		{{gllist}} -->
						<view style="height: 20rpx;"> </view>
						<view class="document-item" v-for="item in gllist" :key="item.id">
							<view class="document-items" @click="viewDocument(item.id)">
								<image class="document-thumbnail" :src="item.img" />
								<view class="document-info">
									<!-- <image class="document-avatar"  :src="item.avatar" /> -->
									<text class="document-name" style="margin-left:5rpx;">{{item.title}}</text>
									<image class="document-lll" style="margin-right:8rpx;" src="/static/icon/lll.png" />
									<text class="document-visits"> 1.2w</text>
								</view>

							</view>
							<view style="height: 20rpx;"> </view>
							<view style=" clear: both;">

							</view>
						</view>
					</view>

				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		commentlist,
		Articlelist
	} from '@/utils/user.js'

	export default {
		data() {
			return {
				items: [null, null, null],
				nav: ['普通搬家', '日式搬家', '企业搬家', '有图'],
				pjlist: [],
				gllist: [],

				documents: [],

				type: 0,
				types: 0
			}
		},
		onLoad() {
			commentlist().then(res => {

				console.log(res)

				this.pjlist = res.data.data.list

			}).catch(error => {
				console.log('Commentlist失败', error)

			})

			this.oute()


		},
		methods: {

			oute() {

				// 1 => ‘攻略’,
				// 2 => ‘普通搬家服务’,
				// 3 => ‘日式搬家服务’,
				// 4 => ‘企业搬迁服务’,
				// 5 => ‘普通搬家收费’,
				// 6 => ‘日式搬家收费’,
				// 7 => ‘企业搬迁收费’,
				// Articlelist

				var data = {
					type: 1,
					page: 1
				}

				Articlelist(data).then(res => {

					console.log(res)
				 
					this.gllist = res.data.data.list
					// this.navitemtab(0)

				}).catch(error => {
					console.error('Articlelist 方法执行出错：', error);
				});
			},




			navtop(i) {
				this.type = i
			},

			navtab(i) {
				this.types = i


			},
			viewDocument(id) {

				console.log('查看文档:', id);


				uni.navigateTo({
					url: '/pages/Strategysetse/Strategysetse?id=' + id
				})

			},

			picture(e, i) {
				console.log(e, i)

				// 在某个事件处理函数中调用
				uni.previewImage({
					current: i,
					urls: e // 需要预览的图片http链接列表
				});

			}


		}
	}
</script>

<style lang="less" scoped>
	.document-item {
		width: 50%;
		float: left;

	}

	.document-items {
		width: 95%;
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.document-thumbnail {
		width: 100%;
		border-radius: 20rpx;
	}

	.document-avatar {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
	}

	.document-info {
		display: flex;
		// justify-content: center;
		align-items: center;
		// border: 2px solid red;
		font-size: 22rpx;
		color: #8a8a8a;
		height: 60rpx;
		font-weight: 600;
	}

	.document-lll {
		margin-left: auto;
		width: 35rpx;
		height: 35rpx;
	}








	.ml-45-5 {
		margin-left: 91rpx;
	}

	.mt-8-5 {
		margin-top: 17rpx;
	}

	.mt-9-5 {
		margin-top: 19rpx;
	}

	.mt-2-5 {
		margin-top: 5rpx;
	}

	.page {
		background-color: #f5f5f5;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_2 {
		overflow-y: auto;
	}

	.section_2 {
		padding: 0 49.72rpx;
		background-color: #ffffff;
	}

	.group_3 {
		padding: 18.34rpx 0 21.14rpx;
	}

	.font_2 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
	}

	.text_4 {
		color: #666666;
		line-height: 33.18rpx;
	}

	.text_5 {
		color: #2b8eff;
		line-height: 33.52rpx;
	}

	.section_3 {
		margin-left: 178.28rpx;
		background-color: #2b8eff;
		border-radius: 1rpx;
		width: 40rpx;
		height: 4rpx;
	}

	.group_4 {
		padding: 28rpx 12rpx 29rpx;
	}

	.group_5 {
		padding-left: 20rpx;
		padding-right: 18rpx;
	}

	.button {
		padding: 17.88rpx 0 16.18rpx;
		background-color: #2b8eff;
		border-radius: 98rpx;
		width: 165rpx;
		height: 60rpx;
		color: #fff;
	}


	.buttons {
		padding: 17.88rpx 0 16.18rpx;
		background-color: #fff;
		border-radius: 98rpx;
		width: 165rpx;
		height: 60rpx;

		color: #222222;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.18rpx;
		/* color: #222222; */
	}

	.text_6 {
		color: #ffffff;
		line-height: 25.96rpx;
	}

	.button_1 {
		padding: 17.78rpx 0 16.04rpx;
		background-color: #ffffff;
		border-radius: 98rpx;
		width: 165rpx;
		height: 60rpx;
	}

	.button_2 {
		padding: 17.84rpx 0 16.14rpx;
		background-color: #ffffff;
		border-radius: 98rpx;
		width: 165rpx;
		height: 60rpx;
	}

	.text_7 {
		line-height: 26.02rpx;
	}

	.button_4 {
		padding: 17.78rpx 0 15.9rpx;
		background-color: #ffffff;
		border-radius: 98rpx;
		width: 112rpx;
		height: 60rpx;
	}

	.text_8 {
		line-height: 26.32rpx;
	}

	.list-item {
		padding: 28rpx 21.52rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_6 {
		width: 345.06rpx;
	}

	.image_4 {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.group_7 {
		margin-left: 12rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.26rpx;
		color: #222222;
	}

	.image_5 {
		width: 26rpx;
		height: 26rpx;
		padding-left: 2rpx;
	}

	.image_6 {
		width: 23rpx;
		height: 23rpx;
	}

	.group_8 {
		width: 168.06rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 17.8rpx;
		color: #666666;
	}

	.text_1 {
		margin-top: 10.52rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		color: #222222;
	}

	.text_10 {
		margin-left: 2.22rpx;
	}

	.equal-division {
		margin-right: 7.48rpx;
	}

	.equal-division-item {
		border-radius: 8rpx;
		width: 154rpx;
		height: 154rpx;
	}

	.tab-bar {
		height: 16.26rpx;
	}
</style>